<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>我秀地图-距离面积计算</title>
    <meta charset="utf-8"/>
    <link href="" rel="shortcut icon" type="image/x-icon"/>
    <link href="../css/imap-gl.css" rel="stylesheet"/>
    <script src="../js/imap-gl.js"></script>
    <script src="../js/imap-gl-draw.js"></script>
    <script src="../js/turf.min.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            overflow: hidden;
        }

        #map {
            height: 100%;
            z-index: 0;
        }

        .calculation-box {
            font-size: 13px;
            width: 100px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgba(255, 255, 255, 0.9);
            max-height: 200px;

        }


    </style>
</head>
<body>


<div id='map'></div>
<div class="calculation-box">
    <div id="calculated-area" style="background-color: #e5f1ea"></div>

</div>
<script>
    //设置msp_server为本地msp服务IP地址
    var map = new imapgl.Map({
        container: 'map',
        center: [116.38504400000001, 39.890383],
        zoom: 3,
        minZoom: 3,
        hash: true,
        maxZoom: 20,
        localIdeographFontFamily: "微软雅黑, 'Microsoft Sans Serif', sans-serif,宋体",
        antialias: false,
        style: "../styles/v1/light-v10-gcj02.json"
    });


    var draw = new IMapDraw({
        displayControlsDefault: true,
        controls: {
            point: false,
            line_string: true,
            polygon: true,
            trash: true,
            combine_features: false,
            uncombine_features: false
        },
        displayControlsDefault: false
    });

    //绑定绘制控件到页面 位置参数有 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . Defaults to 'top-right' .
    map.addControl(draw, "top-right");

    //创建时事件
    map.on('draw.create', updateArea);
    //删除事件
    map.on('draw.delete', updateArea);
    //更新事件
    map.on('draw.update', updateArea);

    function updateArea(e) {

        var data = draw.getAll();
        var answer = document.getElementById('calculated-area');
        answer.innerHTML = "";
        if (data.features[data.features.length - 1].geometry.type == "LineString") {
            var line = turf.lineString(data.features[data.features.length - 1].geometry.coordinates);
            answer.innerHTML = "当前绘制的多段线\n长度为：{0}km".replace("{0}",turf.length(line).toLocaleString());
        } else if (data.features[data.features.length - 1].geometry.type == "Polygon") {
            var polygon = turf.polygon(data.features[data.features.length - 1].geometry.coordinates);
            answer.innerHTML = "当前绘制的多边形\n面积为：{0}㎡".replace("{0}",  turf.area(polygon));
        }
    }


</script>

</body>
</html>
